import React from "react";
import classNames from "classnames";
import './style.less';

export interface ModalOptions {
    color?: string;
    className?: string;
    canTouchClose?: boolean;
    children?: React.ReactNode;
    contentTop?: string;
    onClick?: Function;
    visible: boolean;
}

export default class Modal extends React.Component<ModalOptions, any> {
    static defaultProps = {
        color: 'rgba(0, 0, 0, 0.3)',
        canTouchClose: true,
        onClick: () => { },
        visible: false,
    }

    constructor(props: ModalOptions) {
        super(props)
        this.state = {}
    }

    render() {
        const {
            color, className, children, contentTop, visible, onClick
        } = this.props;
        const classes = classNames({
            'r-modal': true,
            className
        })
        return (
            <div onClick={() => { onClick }} className={classes} style={{
                backgroundColor: this.state.visible ? color : 'rgba(0,0,0,0)', visibility: visible ? 'visible' : 'hidden'
            }}>
                <div className="r-modal-content" style={{ top: contentTop }}>
                    {children}
                </div>
            </div>
        )
    }

}